<template>
  <up-navbar title="面谈承诺书" bgColor="transparent"></up-navbar>
  <img src="../../static/bg.png" alt="" class="bg" />
  <img src="../../static/bigIcon.png" alt="" class="bigIcon" />
  <img src="../../static/phone.png" alt="" class="phone" />
  <div class="topSitting">头部占位</div>
  <div class="mainArea">
    <div class="mainBg">半透明背景</div>
    <div class="mainTitle">本人承诺一下信息合法、真实、准确、有效：</div>
    <div class="mainItem">
      <div class="title">婚姻状况</div>
      <div class="value">
        {{
          faceInfo.maritalStatus === "1"
            ? "已婚"
            : faceInfo.maritalStatus === "2"
            ? "未婚"
            : faceInfo.maritalStatus === "3"
            ? "丧偶"
            : faceInfo.maritalStatus === "4"
            ? "离婚"
            : faceInfo.maritalStatus === "9"
            ? "其他"
            : ""
        }}
      </div>
    </div>
    <div class="mainItem">
      <div class="title">亲属联系人姓名</div>
      <div class="value">{{ faceInfo.relationName }}</div>
    </div>
    <div class="mainItem">
      <div class="title">联系人关系</div>
      <div class="value">
        {{
          faceInfo.relationType === "2"
            ? "配偶"
            : faceInfo.relationType === "3"
            ? "亲属"
            : faceInfo.relationType === "4"
            ? "朋友"
            : faceInfo.relationType === "9"
            ? "其他"
            : ""
        }}
      </div>
    </div>
    <div class="mainItem">
      <div class="title">联系人电话</div>
      <div class="value">{{ faceInfo.relationPhone }}</div>
    </div>
    <div class="mainItem">
      <div class="title">详细地址</div>
      <div class="value">{{ faceInfo.address }}</div>
    </div>
    <div class="mainItem">
      <div class="title">贷款用途</div>
      <div class="value">{{ faceInfo.loanUse==="20205"?"综合消费":"" }}</div>
    </div>
    <div class="agreeProtocol">
      <radio-group @change="checkEvent">
        <radio style="transform: scale(0.7)" value="true" color="#007aff" />
      </radio-group>
      <div class="agreeText">
        我已阅读并同意<span style="color: #3277f2"
          >《“金农信e贷”个人贷款借款人面谈承诺书》</span
        >
      </div>
    </div>
  </div>
  <div class="submitBtn" :class="isCheck ? 'isCheck' : ''" @click="goSubmit">
    提交
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
const store = useAppStore();
const faceInfo = reactive({});
onMounted(() => {
  http
    .interview({
      orderId: store.orderId,
      creditId: store.creditId,
    })
    .then((res) => {
      let { data } = res;
      faceInfo.maritalStatus = data.maritalStatus;
      faceInfo.relationName = data.relationName;
      faceInfo.relationType = data.relationType;
      faceInfo.address = data.address;
      faceInfo.loanUse = data.loanUse;
      faceInfo.relationPhone = data.relationPhone;
    });
});
// 是否点击单选框
const isCheck = ref(false);
const checkEvent = (e) => {
  if (e.detail.value) {
    isCheck.value = true;
    wx.navigateTo({
      url: "../protocolDetail/protocolDetail?value=" + JSON.stringify(faceInfo),
    });
  }
};
const goSubmit = () => {};
</script>

<style scoped lang="scss">
.submitBtn {
  width: 590rpx;
  height: 106rpx;
  margin: 48rpx 80rpx;
  line-height: 106rpx;
  border-radius: 53rpx;
  text-align: center;
  background-color: #3277f2;
  opacity: 0.5;
  color: #ffffff;
  font-size: 34rpx;
}
.isCheck {
  opacity: 1;
}
.mainArea {
  margin: 0 28rpx;
  position: relative;
  border-radius: 16rpx;
  box-shadow: 0 19rpx 0 0 #c2ddff;
  .mainBg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
    background-color: #fff;
    border-radius: 16rpx;
    opacity: 85%;
    color: transparent;
  }
  .mainTitle {
    padding-top: 54rpx;
    margin-bottom: 12rpx;
    height: 42rpx;
    line-height: 42rpx;
    text-align: center;
    color: #333333;
  }
  .mainItem {
    margin: 0 57rpx;
    height: 82rpx;
    border-bottom: 1rpx solid #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .value {
      color: #333;
    }
  }
  .agreeProtocol {
    margin: 0 40rpx;
    display: flex;
    padding-bottom: 33rpx;
    .agreeText {
      font-size: 24rpx;
      line-height: 33rpx;
      color: rgba($color: #000000, $alpha: 0.45);
    }
  }
}
.bg {
  width: 750rpx;
  height: 873rpx;
  position: absolute;
  z-index: -999999;
}
.bigIcon {
  width: 90rpx;
  height: 113rpx;
  position: absolute;
  z-index: -99999;
  left: 534rpx;
  top: 141rpx;
}
.phone {
  width: 45rpx;
  height: 51rpx;
  position: absolute;
  z-index: -99999;
  left: 629rpx;
  top: 187rpx;
}
.topSitting {
  height: 240rpx;
  opacity: 0;
}
</style>
